/** 聊天窗口组件 
属性：
  current:{id:String,name:String,member:Array} 当前与之聊天的用户或群组信息 
  user: { type: Object, required: true }, 当前用户信息 
  list: [{ user: { id: String, name: String, icon: String }, 用户信息
  value:String、Object, 内容 
  time:Number 录音时长,
  type:['text','audio','video','file','image','system','approval'] 消息类型
  date:Date,default:new Date() 消息发送时间 
  showDate:Boolean,default:true 是否显示时间 
  source:['me','else'] 区分我发的还是别人发的 }], 
  showHistory: { type: Boolean, default: true }, 是否显示历史信息按钮 
  TODO: member属性考虑在群组中发送任务时的执行人列表 事件: "send", "back", "more", "userInfo", "history", "share", "task", "delete", */
<template>
  <div>
    <div class="title">
      <div class="chat-title-back-btn">
        <i class="el-icon-back" @click="onBack" />
      </div>
      <div class="chat-current">
        <span class="chat-title-text">{{ current.name }}</span>
      </div>
      <div class="chat-title-back-more">
        <i class="el-icon-more" @click="onMore" />
      </div>
    </div>
    <chat-main
      :list="list"
      :height="height"
      :showHistory="showHistory"
      @task="task"
      @userInfo="userInfo"
      @share="share"
      @delete="remove"
      @history="history"
    />
    <toolbar
      @emojiChange="emojiChange"
      @recordAudio="recordAudio"
      @newTask="newTask"
      @uploadImg="uploadImg"
      @uploadFile="uploadFile"
      @uploadVideo="uploadVideo"
    />
    <editer @send="onSend" ref="chatEditer" />
    <el-dialog
      title="创建任务"
      :visible.sync="createTask"
      :close-on-click-modal="false"
      destroy-on-close
      append-to-body
    >
      <task-form @ok="taskOk" v-model="form" />
    </el-dialog>
  </div>
</template>

<script>
import ChatMain from "./ChatMain";
import Toolbar from "./Toolbar";
import Editer from "./Editer";
import TaskForm from "../todo/TaskForm.vue";
export default {
  components: { ChatMain, Toolbar, Editer, TaskForm },
  model: {
    prop: "list",
    methods: [
      "send",
      "back",
      "more",
      "userInfo",
      "history",
      "share",
      "task",
      "delete",
    ],
  },
  props: {
    current: {
      type: Object,
      required: true,
      validator: (val) => {
        if (!val.hasOwnProperty("name")) {
          console.error("Chat组件的current对象属性必须包含name属性");
          return false;
        }
        if (!(val.hasOwnProperty("name") && typeof val.name == "string")) {
          console.error(
            "Chat组件的current.name属性类型应该为String,当前为:" +
              typeof val.name
          );
          return false;
        }
        if (!val.hasOwnProperty("id")) {
          console.error("Chat组件的title对象属性必须包含name属性");
          return false;
        }
        if (!(val.hasOwnProperty("id") && typeof val.id == "string")) {
          console.error(
            "Chat组件的title.name属性类型应该为String,当前为:" + typeof val.id
          );
          return false;
        }
        return true;
      },
    },
    user: { type: Object, required: true },
    list: { type: Array, required: true },
    showHistory: { type: Boolean, default: true },
  },
  data() {
    return {
      form: {},
      height: document.documentElement.clientHeight - 240 - 40 - 28,
      createTask: false,
    };
  },
  methods: {
    onSend(text) {
      const msg = {
        value: text,
        type: "text",
        name: this.user.name,
        source: "me",
        icon: this.icon,
        date: new Date(),
        id: this.user.id,
      };
      this.list.push(msg);
      this.$emit("send", msg, this.list);
    },
    onBack(e) {
      this.$emit("back", e);
    },
    onMore(e) {
      this.$emit("more", e);
    },
    emojiChange(html) {
      console.log(html);
      this.$refs.chatEditer.setText(html);
    },
    recordAudio(time, audio) {
      this.$api.uploadAudio(audio, time).then((data) => {
        const { success, result, code, msg } = data;
        if (success) {
          if (result.hasOwnProperty("rows")) {
            result.rows.forEach((row) => {
              const msg = {
                value: { audio: row.url, time: row.time },
                name: this.user.name,
                type: "audio",
                source: "me",
                icon: this.icon,
                date: new Date(),
                id: this.user.id,
              };
              this.list.push(msg);
            });
          } else {
            const msg = {
              value: { audio: result.url, time: result.time },
              name: this.user.name,
              type: "audio",
              source: "me",
              icon: this.icon,
              date: new Date(),
              id: this.user.id,
            };
            this.list.push(msg);
          }

          this.$emit("send", msg, this.list);
        } else {
          this.$alert(msg, "错误代码：" + code, { type: "error" });
        }
      });
    },
    uploadVideo(files) {
      this.$api.uploadVideo(files).then((data) => {
        const { success, result, code, msg } = data;
        if (success) {
          const msg = {
            value: result,
            name: this.user.name,
            type: "video",
            source: "me",
            icon: this.icon,
            date: new Date(),
            id: this.user.id,
          };
          this.list.push(msg);
          this.$emit("send", msg, this.list);
        } else {
          this.$alert(msg, "错误代码：" + code, { type: "error" });
        }
      });
    },
    uploadImg(files) {
      this.$api.uploadImg(files).then((data) => {
        const { success, result, code, msg } = data;
        if (success) {
          if (result.hasOwnProperty("rows")) {
            result.rows.forEach((row) => {
              const msg = {
                value: row,
                name: this.user.name,
                type: "image",
                source: "me",
                icon: this.icon,
                date: new Date(),
                id: this.user.id,
              };
              this.list.push(msg);
            });
          } else {
            const msg = {
              value: result,
              name: this.user.name,
              type: "image",
              source: "me",
              icon: this.icon,
              date: new Date(),
              id: this.user.id,
            };
            this.list.push(msg);
          }
          this.$emit("send", msg, this.list);
        } else {
          this.$alert(msg, "错误代码：" + code, { type: "error" });
        }
      });
    },
    uploadFile(files) {
      this.$api.uploadFile(files).then((data) => {
        const { success, result, code, msg } = data;
        if (success) {
          if (result.hasOwnProperty("rows")) {
            result.rows.forEach((row) => {
              const msg = {
                value: row,
                name: this.user.name,
                type: "file",
                source: "me",
                icon: this.icon,
                date: new Date(),
                id: this.user.id,
              };
              this.list.push(msg);
            });
          } else {
            const msg = {
              value: {
                fileName: result.fileName,
                size: result.size,
                url: result.url,
              },
              name: this.user.name,
              type: "file",
              source: "me",
              icon: this.icon,
              date: new Date(),
              id: this.user.id,
            };
            this.list.push(msg);
          }
          this.$emit("send", msg, this.list);
        } else {
          this.$alert(msg, "错误代码：" + code, { type: "error" });
        }
      });
    },
    history(list) {
      this.$emit("history", list);
    },
    userInfo(id, type) {
      this.$emit("userInfo", id, type);
    },
    task(row) {
      this.$emit("task", row);
      // this.form = {region:'shanghai',title:'fdasfasdfasd'}
    },
    remove(row) {
      this.$emit("delete", row);
    },
    share(row) {
      this.$emit("share", row);
    },
    taskOk(task, createTask) {
      this.createTask = createTask;
      console.log(task, createTask);
    },
    newTask() {
      this.createTask = !this.createTask;
      this.form = { region: "shanghai", title: "fdsafdasf" };
    },
  },
  mounted() {
    const self = this;
    //根据窗口大小调整
    window.onresize = () => {
      return (() => {
        window.fullHeight = document.documentElement.clientHeight;
        self.height = window.fullHeight - 240 - 40 - 28;
      })();
    };
  },
};
</script>

<style lang="less" scoped>
.title {
  display: flex;
  align-items: center;
  height: 40px;
  line-height: 40px;
  background-color: #ececec;
  overflow: hidden;
  text-align: center;
  span {
    margin-left: 10px;
    color: #000;
  }
}
.chat-title-icon {
  width: 32px;
  flex: 0 0 32px;
  justify-content: start;
  margin-top: 5px;
  color: #000;
}
.chat-current {
  width: 100%;
  display: block;
  text-align: center;
  height: 40px;
  line-height: 40px;
  span {
    margin-bottom: -10px;
  }
}
.chat-title-text {
  width: 100%;
}
.chat-title-back-btn {
  width: 32px;
  flex: 0 0 32px;
  justify-content: start;
  cursor: pointer;
  text-align: center;
  color: #000;
}
.chat-title-back-more {
  width: 32px;
  flex: 0 0 32px;
  justify-content: end;
  cursor: pointer;
  text-align: center;
  color: #000;
}
</style>
